<!-- 用户信息里的资产，或者说是导航，  -->
<!-- @todo 理应单独一个模块，虽然数据是从用户模块里拿，但是，他应该是一个单独的模块 -->
<template>
	<widget-root :styles="navaWrapStyle" :class="themeName">
		<!-- S 导航 -->
		<view class="assets-nav white flex" :style="navaStyle" v-if="false">
			<view
				v-for="(item, index) in contentData"
				:key="index" 
				class="flex-1" 
				@click="jump(item)"
			>
				<view class="flex-col col-center" style="margin: 0 8rpx;">
					<text class="number" :style="{'color': styles.nav_value_font_color}"> {{ userInfo[item.field] || 0}}</text>
					<text class="label" :style="{'color': styles.nav_label_font_color}"> {{ item.name }}</text>
				</view>
			</view>
		</view>
		<!-- E 导航 -->
	</widget-root>
</template>

<script>
	import { user_info_assets_data } from '../const.js'
	const contentDataStatic = []
	export default {
		name: 'UserInfoAssets',
		props: {
			content: {
				type: Object
			},
			styles: {
				type: Object
			},
		},
		
		data() {
			return {
				
			};
		},
		computed: {
			navaWrapStyle () {
				const styles =  this.styles
				// padding: `${styles.padding_top}px ${styles.padding_horizontal}px ${styles.padding_bottom}px`,
				//     'background-color': styles.root_bg_color
				return {
					'padding_top': styles.nav_padding_top,
					'padding_bottom': styles.nav_padding_bottom,
					'padding_horizontal': styles.nav_padding_horizontal,
					'background-color': styles.nav_root_bg_color
				
				}
			},
			navaStyle (){
				const styles = this.styles
				const border_radius_top = styles.nav_border_radius_top * 2
				const border_radius_bottom = styles.nav_border_radius_bottom * 2
				const radius = `${border_radius_top}rpx ${border_radius_top}rpx ${border_radius_bottom}rpx ${border_radius_bottom}rpx`
				return {
					'background-color': this.styles.nav_bg_color,
					'border-radius': radius
				}
			},
			contentData() {
				if (this.content && this.content.data && Array.isArray(this.content.data) && this.content.data.length) {
					return this.content.data
				}
				return [
					...user_info_assets_data
				]
			}
		},
		methods: {
			jump(row) {
				console.log(row)
				const { link } = row
				if (!link || Array.isArray(link) || !link.path) {
					return
				}
				if (link.isTabBar) {
					return uni.switchTab({
						url: link.path
					})
				}
				uni.navigateTo({
					url: link.path
				})
			}
		}
	}
</script>

<style lang="scss">
.assets-nav {
	padding: 32rpx 0 32rpx;
	font-family: Microsoft YaHei;
	.number {
		font-size: 40rpx;
		font-weight: 700;
		margin-bottom: 20rpx;
	}
	.label {
		font-size: 26rpx;
	}
}
</style>
